<script lang="ts" setup>
import { ref } from 'vue';
import useStore from "@/store";
import { storeToRefs } from "pinia";
const { comments } = useStore();
const { nowPost, list } = storeToRefs(comments);
const path = ref("/src/assets/img/temp.png");
</script>

<template>
	<div class="detail-bar-header">
		<div class="detail-bar-header-author">
			<div class="detail-bar-header-author-profix" :style="{ backgroundImage: 'url(' + path + ')' }"></div>
			<div class="detail-bar-header-author-txt">
				<div>张三</div>
				<div>工号：{{ nowPost.postStartUserId }}</div>
			</div>
			<div class="detail-bar-header-author-len">
				此文共{{ list.length }}条评论
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
@import "@/assets/scss";

.detail-bar-header {
	width: 100%;
	height: 45px;

	.detail-bar-header-author {
		@include clearfix;

		.detail-bar-header-author-len,
		.detail-bar-header-author-txt,
		.detail-bar-header-author-profix {
			float: left;
		}

		.detail-bar-header-author-txt div:first-child {
			font-size: large;
			margin-bottom: 3px;
			margin-right: 25px;
		}

		.detail-bar-header-author-txt div:nth-child(2) {
			font-size: x-small;
		}

		.detail-bar-header-author-profix {
			width: 45px;
			height: 45px;
			border-radius: 50%;
			background-size: cover;
			margin-right: 15px;
		}

		.detail-bar-header-author-len {
			line-height: 45px;
			color: #859ec5;
		}
	}
}
</style>
